<template>
  <div class="tool-alternative">
    <h2 class="bar-title mb-6 break-words text-center">
      <span class="text-gray-1000 text-26 font-semibold break-words w-full">{{$t('alternativeAIToolsFor')}} {{toolName}}</span>
    </h2>
    <div class="tool-list mt-8 grid gap-5 sm:grid-cols-3">
      <tools v-for="(item, key) in toolsList"
        :key="item.handle+'-'+key"
        :toolPosIndex="key"
        :toolsData="item"
        :isExposure="true"></tools>
    </div>
    <div class="flex justify-center mt-6">
      <common-link path="/alternative/:handle"
        :params='{handle: $route.params.handle }'
        class="mt-4 sm:mt-0 flex items-center justify-between h-12 px-3 text-base border border-gray-1200 duration-100 hover:border-purple-1300 rounded group whitespace-nowrap"
        v-if="comparisons !== null">
        <span class="text-base text-gray-1000 group-hover:text-purple-1300">
          {{$t('detail_alternative',{toolName:toolName})}}
        </span>
        <svg-icon className="ml-5 text-base text-gray-1000 group-hover:text-purple-1300"
          iconName='arrow_right'></svg-icon>
      </common-link>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ToolDetailAlternative',
  props: {
    tool: {
      type: Object,
      default: function () {
        return {}
      },
    },
    comparisons: {
      type: Array | null,
      default: null,
    },
    toolsList: {
      type: Array | null,
      default: () => {
        return []
      },
    },
    toolName: {
      type: String,
      default: '',
    },
  },
}
</script>